<template>
  <div class="operation-flow-visualization">
    <!-- 使用新的 FlowGraph 组件 -->
    <FlowGraph
      :nodes="flowNodes"
      :config="graphConfig"
      @node-click="handleOperationClick"
    >
      <!-- 自定义节点内容 -->
      <template #node-content="{ node }">
        <div class="operation-info">
          <div class="info-row">
            <span class="info-label">编号:</span>
            <span class="info-value">{{ node.operationCode }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">时长:</span>
            <span class="info-value">{{ node.operationTotalStdTime }}min</span>
          </div>
          <div class="info-row" v-if="node.operationEquipType">
            <span class="info-label">设备:</span>
            <span class="info-value">{{ node.operationEquipType }}</span>
          </div>
        </div>
      </template>
    </FlowGraph>
  </div>
</template>

<script>
import { computed } from "vue";
import FlowGraph from "@/idoo-core/graph/FlowGraph.vue";

export default {
  name: "OperationFlowVisualization",
  components: {
    FlowGraph,
  },
  props: {
    operations: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["operation-click"],
  setup(props, { emit }) {
    // 将工序数据转换为 FlowGraph 需要的格式
    const flowNodes = computed(() => {
      return props.operations.map(op => ({
        id: op.id,
        title: op.operationName,
        description: op.operationDescription,
        preNodeIds: op.preOperationId,
        nextNodeIds: op.sufOperationId,
        // 保留原有字段用于自定义内容展示
        operationCode: op.operationCode,
        operationTotalStdTime: op.operationTotalStdTime,
        operationEquipType: op.operationEquipType,
        operationPersonSkill: op.operationPersonSkill,
        operationPreparedTime: op.operationPreparedTime,
        data: {
          code: op.operationCode,
          duration: op.operationTotalStdTime,
          equipment: op.operationEquipType,
        },
      }));
    });
    
    // FlowGraph 配置
    const graphConfig = {
      nodeWidth: 160,
      nodeHeight: 100,
      horizontalSpacing: 240,
      verticalSpacing: 140,
      padding: 20,
      showLegend: true,
      autoResize: true,
    };
    
    // 处理节点点击
    const handleOperationClick = ({ node }) => {
      emit("operation-click", node);
    };
    
    // 所有旧代码已被 FlowGraph 组件替代，这里只保留空的兼容变量
    
    return {
      flowNodes,
      graphConfig,
      handleOperationClick,
    };
  },
};
</script>

<style scoped>
.operation-flow-visualization {
  width: 100%;
  min-height: 320px;
}

/* 自定义节点内容样式 */
.operation-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  color: #666;
  font-weight: 500;
}

.info-value {
  color: #333;
  font-weight: 600;
}
</style>